<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态时钟</title>
    <style>
        .parent {
            width: 100vw;
            height: 100vh;
            background: url('img/time.jpg')
                        center no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .child {
            padding: 30px 50px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            backdrop-filter: blur(8px);
            font-family: 'Arial Black', sans-serif;
            font-size: 4.5em;
            color: #fff;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child" id="clock">00:00:00</div>
    </div>

    <script>
        const clock = document.getElementById('clock');
        
        // 生成高对比度随机颜色
        function getRandomColor() {
            const hue = Math.floor(Math.random() * 360);
            return `hsl(${hue}, 80%, 60%)`;
        }

        function updateTime() {
            const now = new Date();
            const timeString = [
                now.getHours(),
                now.getMinutes(),
                now.getSeconds()
            ].map(n => n.toString().padStart(2, '0')).join(':');
            
            clock.textContent = timeString;
        }

        // 颜色渐变过渡
        let currentColor = getRandomColor();
        setInterval(() => {
            const targetColor = getRandomColor();
            clock.animate(
                [{ color: currentColor }, { color: targetColor }],
                { duration: 500, fill: 'forwards' }
            );
            currentColor = targetColor;
        }, 500);

        updateTime();
        setInterval(updateTime, 1000);
    </script>
</body>
</html>